<script setup lang="ts">
import { onMounted, ref } from 'vue'
import DashboardHeader from '~/components/DashboardHeader/index.vue'

import ItemEight from './components/item-eight.vue'

import ItemFive from './components/item-five.vue'
import ItemFour from './components/item-four.vue'
import ItemNine from './components/item-nine.vue'
import ItemOne from './components/item-one.vue'
import ItemServen from './components/item-serven.vue'
import ItemSix from './components/item-six.vue'
import ItemTen from './components/item-ten.vue'
import ItemThree from './components/item-three.vue'
import ItemTwo from './components/item-two.vue'
import HeaderTitle from './header-title.png'

import type { HrInfo, HrNews } from './type'

import { sysIntApi } from '@/api'

const hrInfo = ref<HrInfo>()
const show = ref(false)

const news = ref<HrNews[]>()

onBeforeMount(async () => {
  const { data } = await sysIntApi.getHumanResourceInfo()
  const res = await sysIntApi.getHrNewsInfo(10)
  news.value = res.data.records ?? []
  hrInfo.value = data as HrInfo
})

onMounted(() => {
  show.value = true
})
</script>

<template>
  <div class="dashboard-wrapper h-full w-full overflow-auto">
    <div class="dashboard hr-dashboard relative h-full min-h-900px min-w-1600px w-full">
      <DashboardHeader class="absolute left-0 right-0 top-0 z-1" :title-img="HeaderTitle" />
      <div class="h-full w-full flex flex-col gap-3 p-3">
        <div class="mt-17 w-full flex gap-3 overflow-hidden">
          <Transition
            enter-active-class="animate__animated animate__fadeInDown"
            leave-active-class="animate__animated animate__fadeOutDown"
          >
            <ItemOne v-if="hrInfo?.basicInfo" class="w-1/4 flex-shrink-0" :data="hrInfo?.basicInfo" />
          </Transition>
          <Transition
            enter-active-class="animate__animated animate__fadeInDown animate__delay-1s"
            leave-active-class="animate__animated animate__fadeOutDown"
          >
            <ItemTwo v-if="hrInfo?.ageInfo" class="w-1/4" :data="hrInfo?.ageInfo" :avg-age="hrInfo?.basicInfo?.averageAgeNum ?? 0" />
          </Transition>
          <Transition
            enter-active-class="animate__animated animate__fadeInDown animate__delay-2s"
            leave-active-class="animate__animated animate__fadeOutDown"
          >
            <ItemThree v-if="hrInfo?.educationInfo" class="w-1/4" :data="hrInfo?.educationInfo" />
          </Transition>
          <Transition
            enter-active-class="animate__animated animate__fadeInDown animate__delay-3s"
            leave-active-class="animate__animated animate__fadeOutDown"
          >
            <ItemFour v-if="hrInfo?.nativePlaceInfo" class="w-1/4 flex-shrink-0" :data="hrInfo?.nativePlaceInfo" />
          </Transition>
        </div>
        <div class="w-full flex gap-3 overflow-hidden">
          <Transition
            enter-active-class="animate__animated animate__fadeInLeft animate__delay-4s"
            leave-active-class="animate__animated animate__fadeOutLeft"
          >
            <ItemFive v-if="hrInfo?.departmentInfo" class="w-1/4 flex-shrink-0" :data="hrInfo?.departmentInfo" />
          </Transition>
          <Transition
            enter-active-class="animate__animated animate__fadeIn animate__delay-5s"
            leave-active-class="animate__animated animate__fadeOut"
          >
            <ItemSix v-if="hrInfo?.occupationInfo" class="w-[calc(50%-1.5rem)]" :data="hrInfo.occupationInfo" />
          </Transition>
          <Transition
            enter-active-class="animate__animated animate__fadeInRight  animate__delay-6s"
            leave-active-class="animate__animated animate__fadeOutRight"
          >
            <ItemServen v-if="hrInfo?.seniorityInfo" class="w-1/4 flex-shrink-0" :data="hrInfo.seniorityInfo" />
          </Transition>
        </div>
        <div class="w-full flex flex-auto gap-3 overflow-hidden">
          <Transition
            enter-active-class="animate__animated animate__fadeInUp  animate__delay-7s"
            leave-active-class="animate__animated animate__fadeOutUp"
          >
            <ItemEight v-if="hrInfo?.personnelInfo" class="flex-auto" :data="hrInfo.personnelInfo" />
          </Transition>
          <Transition
            enter-active-class="animate__animated animate__fadeInUp animate__delay-8s"
            leave-active-class="animate__animated animate__fadeOutUp"
          >
            <ItemNine v-if="hrInfo?.resignationReasonsInfo" class="w-1/4 flex-shrink-0" :data="hrInfo.resignationReasonsInfo" />
          </Transition>
          <Transition
            enter-active-class="animate__animated animate__fadeInUp animate__delay-9s"
            leave-active-class="animate__animated animate__fadeOutUp"
          >
            <ItemTen v-if="news" class="w-1/4 flex-shrink-0" :data="news" />
          </Transition>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.dashboard-wrapper {
  scrollbar-width: thin;
  .dashboard {
    background-color: rgb(6, 19, 42);
    background-image: url('~/assets/images/bg.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    .block-body {
      background: rgba(31, 82, 145, 0.1);
    }
    .text-xs {
      @apply text-xs;
    }
    .text-sm {
      @apply text-sm;
    }
    .text-md {
      @apply text-md;
    }
    .text-lg {
      @apply text-lg;
    }
    .text-xl {
      @apply text-xl;
    }
    .text-2xl {
      @apply text-2xl;
    }
  }
}
.hr-dashboard {
  --animate-delay: 0.2s;

  @for $i from 1 through 10 {
    .animate__animated.animate__delay-#{$i}s {
      -webkit-animation-delay:calc(var(--animate-delay)*$i);
      animation-delay:calc(var(--animate-delay)*$i)
    }
  }
}
</style>
